import React, {Component} from "react";
import { Card, Row, Col,Form, Input,Upload, Image, Button,message } from 'antd'
import { getscenicdetails, updatescene, addscene, } from '../../api/scene'
import  rules  from '../../utils/rules'


class SceneUpdate extends Component {
 myRef = React.createRef()
state = {
    sceneInfo: {
        scenicPicture4: '', 
        scenicPicture3: '', 
        scenicPicture2: '', 
        scenicPicture1: '', 
        scenicContent: '',
        remind: ''
    },
    id: '',
}

componentDidMount () {
   const id = this.props.location.query ? this.props.location.query.id :  null
   if (id) {
    this.setState({id}, () => {
        this.getSceneInfo()
    })
   }
}

addScene = async (value) => {
  if (this.state.id) {
    const res = await updatescene(this.state.sceneInfo)
    if (res.code === 200) {
        message.success('更新游记成功')
        this.back()
      } else {
        message.error('更新游记失败')
      }
  } else {
    const data = {...value, ...this.state.sceneInfo}
    console.log(data)
    const result = await addscene(data)
    if (result.code === 200) {
        message.success('添加游记成功')
        this.back()
      } else {
        message.error('添加游记失败')
      }
  }
}

// 确认
submit = () => {
    this.myRef.current.submit()  
}

// 表单验证失败
FormError = () => {
    message.error('表单数据有误')
   }

// 获取景点数据
getSceneInfo = async () => {
   const res = await  getscenicdetails({scenicId: this.state.id})
   const sceneInfo = res.data.data
   this.setState({sceneInfo})
}
// 返回
back = () => {
    this.props.history.goBack()
}

// 图片上传
handleChange = (info, value) => {
    if (info.file.status !== 'uploading') {
    }
    if (info.file.status === 'done') {
      if(value === 1) {
        const scenicPicture1 = info.file.response.data.url
        this.setState({sceneInfo: {...this.state.sceneInfo,scenicPicture1}})
      } else if (value === 2) {
        const scenicPicture2 = info.file.response.data.url
        this.setState({sceneInfo: {...this.state.sceneInfo,scenicPicture2}})
      } else if (value === 3){
        const scenicPicture3 = info.file.response.data.url
        this.setState({sceneInfo: {...this.state.sceneInfo,scenicPicture3}})
      } else {
        const scenicPicture4 = info.file.response.data.url
        this.setState({sceneInfo: {...this.state.sceneInfo,scenicPicture4}})
      }
      message.success('图片上传成功');
    } else if (info.file.status === 'error') {
      message.error('图片上传失败');
    }
   }

  render() {
      const {sceneInfo, id} = this.state
    return (
    <Card>
      {id ?   <Form ref={this.myRef} onFinish={(values) => this.addScene(values)} onFinishFailed={this.FormError}>
   <Row style={{justifyContent: 'space-between', display: 'flex'}}>
       <Col span={7} ><Form.Item label="景点名称" rules={rules.scenicName} ><Input value={sceneInfo.scenicName}  onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, scenicName: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7} ><Form.Item label="精度"  rules={rules.scenicLongitude}><Input value={sceneInfo.scenicLongitude}  onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, scenicLongitude: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7} ><Form.Item label="纬度"  rules={rules.scenicLatitude}><Input value={sceneInfo.scenicLatitude}   onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, scenicLatitude: e.target.value}})}}></Input></Form.Item></Col>
   </Row>
   <Row style={{justifyContent: 'space-between', display: 'flex'}}>
       <Col span={7}><Form.Item label="官网" ><Input value={sceneInfo.scenicUrl} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, scenicUrl: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7}><Form.Item label="景点地址" ><Input  value={sceneInfo.scenicAddress}  onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, scenicAddress: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7}><Form.Item label="景点热线" ><Input  value={sceneInfo.scenicPhone} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, scenicPhone: e.target.value}})}}></Input></Form.Item></Col>
   </Row>
   <Row style={{justifyContent: 'space-between', display: 'flex'}}>
       <Col span={7}><Form.Item label="特色一"  rules={rules.labelOne} ><Input  value={sceneInfo.labelOne} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, labelOne: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7}><Form.Item label="特色二" rules={rules.labelTwo} ><Input  value={sceneInfo.labelTwo}  onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, labelTwo: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7}><Form.Item label="天气" ><Input  value={sceneInfo.weather} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, weather: e.target.value}})}}></Input></Form.Item></Col>
   </Row>
   <Row style={{justifyContent: 'space-between', display: 'flex'}}>
       <Col span={7}><Form.Item label="阅读量"  rules={rules.reading}><Input  value={sceneInfo.reading}  onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, reading: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7}><Form.Item label="开放时间" ><Input  value={sceneInfo.openTime} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, openTime: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7}><Form.Item label="停车场" ><Input  value={sceneInfo.park} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, park: e.target.value}})}}></Input></Form.Item></Col>
   </Row>
   <Row style={{justifyContent: 'space-between', display: 'flex'}}>
       <Col span={7}><Form.Item label="WIFI" ><Input  value={sceneInfo.wifi} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, wifi: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7}><Form.Item label="手机充电" ><Input value={sceneInfo.mobileCharge} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, mobileCharge: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7}><Form.Item label="园内交通" ><Input  value={sceneInfo.traffice} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, traffice: e.target.value}})}}></Input></Form.Item></Col>
   </Row>
   <Row style={{ justifyContent: 'space-between', display: 'flex'}}>
       <Col span={7}><Form.Item label="卫生间" ><Input  value={sceneInfo.toilet} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, toilet: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7} ><Form.Item label="餐厅" ><Input  value={sceneInfo.restaurant} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, restaurant: e.target.value}})}}></Input></Form.Item></Col>
       <Col span={7} ><Form.Item label="城市" ><Input  value={sceneInfo.city} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, city: e.target.value}})}}></Input></Form.Item></Col>
   </Row>
   </Form>: 
     <Form ref={this.myRef} onFinish={(values) => this.addScene(values)} onFinishFailed={this.FormError}>
     <Row style={{justifyContent: 'space-between', display: 'flex'}}>
         <Col span={7} ><Form.Item label="景点名称" name="scenicName"  rules={rules.scenicName}><Input value={sceneInfo.scenicName}></Input></Form.Item></Col>
         <Col span={7} ><Form.Item label="精度" name="scenicLongitude"  rules={rules.scenicLongitude}><Input value={sceneInfo.scenicLongitude}></Input></Form.Item></Col>
         <Col span={7} ><Form.Item label="纬度" name="scenicLatitude"  rules={rules.scenicLatitude}><Input></Input></Form.Item></Col>
     </Row>
     <Row style={{justifyContent: 'space-between', display: 'flex'}}>
         <Col span={7}><Form.Item label="官网" name="scenicUrl"><Input></Input></Form.Item></Col>
         <Col span={7}><Form.Item label="景点地址" name="scenicAddress" rules={rules.scenicAddress}><Input></Input></Form.Item></Col>
         <Col span={7}><Form.Item label="景点热线" name="scenicPhone"><Input></Input></Form.Item></Col>
     </Row>
     <Row style={{justifyContent: 'space-between', display: 'flex'}}>
         <Col span={7}><Form.Item label="特色一" name="labelOne"  rules={rules.labelOne}><Input></Input></Form.Item></Col>
         <Col span={7}><Form.Item label="特色二" name="labelTwo"  rules={rules.labelTwo}><Input></Input></Form.Item></Col>
         <Col span={7}><Form.Item label="天气" name="weather"><Input></Input></Form.Item></Col>
     </Row>
     <Row style={{justifyContent: 'space-between', display: 'flex'}}>
         <Col span={7}><Form.Item label="阅读量" name="reading"  rules={rules.reading}><Input></Input></Form.Item></Col>
         <Col span={7}><Form.Item label="开放时间" name="openTime"><Input></Input></Form.Item></Col>
         <Col span={7}><Form.Item label="停车场" name="park"><Input></Input></Form.Item></Col>
     </Row>
     <Row style={{justifyContent: 'space-between', display: 'flex'}}>
         <Col span={7}><Form.Item label="WIFI" name="wifi"><Input></Input></Form.Item></Col>
         <Col span={7}><Form.Item label="手机充电" name="mobileCharge"><Input></Input></Form.Item></Col>
         <Col span={7}><Form.Item label="园内交通" name="traffice"><Input></Input></Form.Item></Col>
     </Row>
     <Row style={{ justifyContent: 'space-between',display: 'flex'}}>
         <Col span={7}><Form.Item label="卫生间" name="toilet"><Input></Input></Form.Item></Col>
         <Col span={7}><Form.Item label="餐厅" name="restaurant"><Input></Input></Form.Item></Col>
         <Col span={7} ><Form.Item label="城市" name="city"  rules={rules.city}><Input></Input></Form.Item></Col>
     </Row>
     </Form>}
   <Row style={{ display: 'flex', justifyContent: 'space-around'}}>
       <Col span={5} style={{alignContent:'center', alignItems:'center', display: 'flex'}}>
           <span style={{paddingRight: '12px'}}>景点图一:</span>
       <Upload  action="http://111.75.252.147:8888/app/scenic/picUpload" name="file" onChange={(info) => this.handleChange(info, 1)}  >
           <Image preview={false} src={sceneInfo.scenicPicture1} fallback="" style={{width: '60px', height: '60px'}}></Image >
        </Upload>
       </Col>
       <Col span={5} style={{alignContent:'center', alignItems:'center', display: 'flex'}}>
       <span style={{paddingRight: '12px'}}>景点图二:</span>
       <Upload  action="http://111.75.252.147:8888/app/scenic/picUpload" name="file" onChange={(info) => this.handleChange(info, 2)}  >
           <Image preview={false}  src={sceneInfo.scenicPicture2} fallback="" style={{width: '60px', height: '60px'}}></Image >
        </Upload>
       </Col>
       <Col span={5} style={{alignContent:'center', alignItems:'center', display: 'flex'}}>
       <span style={{paddingRight: '12px'}}>景点图三:</span>
       <Upload  action="http://111.75.252.147:8888/app/scenic/picUpload" name="file" onChange={(info) => this.handleChange(info, 3)}  >
           <Image preview={false} src={sceneInfo.scenicPicture3} fallback="" style={{width: '60px', height: '60px'}}></Image >
        </Upload>
       </Col>
       <Col span={5} style={{alignContent:'center', alignItems:'center', display: 'flex'}}>
       <span style={{paddingRight: '12px'}}>景点图四:</span>
       <Upload  action="http://111.75.252.147:8888/app/scenic/picUpload" name="file" onChange={(info) => this.handleChange(info, 4)}  >
           <Image preview={false}  src={sceneInfo.scenicPicture4} fallback="" style={{width: '60px', height: '60px'}}></Image >
        </Upload>
       </Col>
   </Row>

   <Row style={{display: 'flex', justifyContent: 'space-around', marginTop: '36px'}}>
       <Col span={11}>
           <span>景点介绍</span>
           <Input.TextArea rows={4} value={sceneInfo.scenicContent} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, scenicContent: e.target.value}})}}></Input.TextArea>
       </Col>
       <Col span={11}>
           <span>游玩贴士</span>
           <Input.TextArea rows={4} value={sceneInfo.remind} onChange={(e) => {this.setState({sceneInfo: {...this.state.sceneInfo, remind: e.target.value}})}}></Input.TextArea>
       </Col>
   </Row>
   <div style={{justifyContent: 'flex-end', display: 'flex', marginTop: '36px'}}>
      <Button className="backBtn" onClick={() => {this.back()}}>取消</Button>
      <Button className="editBtn" style={{margin: "0 12px"}} onClick={() => this.submit()}>确认</Button>
   </div>
    </Card>);
  }
}

export default SceneUpdate;